<!-- modal  -->
<template>
    <div class='modal-wrapper' id="modalWrapper" ref="modalWrapper" v-show="modalFlag">
        <div class="modal-mask"></div>
        <div class="modal-content" :class="computClass" :style="modalStyle">
            <div class="modal-top modal-top1">
                <div class="modal-top-img">
                    <svg id="border1"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750.33 24.3">
                        <path class="border1-path" d="M373,4h4V0h-4Zm0,6h4V6h-4ZM739.67.33H714.33l4,3.66h19l9.34,9.33v6l3.66,5v-13ZM720,5.66,722.83,9h16.34l-3.5-3.33ZM461.75.16l-4.5,4.5h257L709.75.41ZM381,0V4h63.33L442,7.32H381V9.65h68.67L458.33.33ZM0,11.32v13l3.67-5v-6L13,4H32L36,.33H10.67ZM11.17,9H27.5l2.83-3.33H14.67ZM40.58.41l-4.5,4.25h257l-4.5-4.5ZM300.67,9.65h68.66V7.32h-61L306,4h63.33V0L292,.33Z"/>
                    </svg>
                </div>
                <div class="modal-top-color">
                    <svg id="color1"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 24">
                        <path class="color1-path" d="M0,23.5V10.94L10.44.5H739.56L750,10.94V23.5Z"/>
                    </svg>
                </div>
            </div>
            <div class="modal-center">
                <modalSimple v-show="componentsName == 'modalSimple'"  :data="params"></modalSimple>
                <validPeriod v-show="componentsName == 'validPeriod'"></validPeriod>
                <systemCheck v-show="componentsName == 'systemCheck'"></systemCheck>
                <chipLoad v-show="componentsName == 'chipLoad'" :data="params"></chipLoad>
            </div>
            <div class="modal-top modal-bottom">
                <div class="modal-top-img">
                    <svg id="border2"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750.33 24.3">
                        <path class="border1-path" d="M373,4h4V0h-4Zm0,6h4V6h-4ZM739.67.33H714.33l4,3.66h19l9.34,9.33v6l3.66,5v-13ZM720,5.66,722.83,9h16.34l-3.5-3.33ZM461.75.16l-4.5,4.5h257L709.75.41ZM381,0V4h63.33L442,7.32H381V9.65h68.67L458.33.33ZM0,11.32v13l3.67-5v-6L13,4H32L36,.33H10.67ZM11.17,9H27.5l2.83-3.33H14.67ZM40.58.41l-4.5,4.25h257l-4.5-4.5ZM300.67,9.65h68.66V7.32h-61L306,4h63.33V0L292,.33Z"/>
                    </svg>
                </div>
                <div class="modal-top-color">
                    <svg id="color2"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 24">
                        <path class="color1-path" d="M0,23.5V10.94L10.44.5H739.56L750,10.94V23.5Z"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import EventBus from '@/assets/js/app/cmlpanel/util/bus.js'
import SizeAdapt from '@/assets/js/app/utils/SizeAdapt'
import { setTimeout } from 'timers';
import validPeriod from './valid-period'
import modalSimple from './modal-simple'
import chipLoad from './chip-load'
import * as anov from 'anov-core'
import systemCheck from './system-check'
export default {
    components: {
        validPeriod,
        modalSimple,
        systemCheck,
        chipLoad
    },
    name: 'modal',
    data() {
        return {
            modalFlag: false,
            params: {
                type: '',
                content: '',
                onClose: function(){}
            },
            modalStyle:{},
            computClass: '',
            componentsName: '',
            modalSoundId: null
        };
    },
    computed: {
        ...anov.envServer.mapState(['modalInfo']),
    },
    watch: {},
    methods: {
        open(params){
            this.componentsName = params.componentsName ? params.componentsName : 'modalSimple'
            this.modalStyle=params.style
            //设置app filter
            let appDom = document.getElementById("app");
            TweenMax.to(appDom, .5, {filter: 'blur(10px)'})
            TweenMax.to('.modal-wrapper', .5, {opacity: 1, zIndex: 1})
            
            if(!params.type || params.type == 'success'){
                this.computClass = 'success'
                this.modalSoundId = anov.soundServer.play({type: 'modalSuccess'})
            }else if(params.type == 'warn'){
                this.computClass =  'warning'
                // this.modalSoundId = anov.soundServer.play({type: 'modalWarning'})
            }else if(params.type == 'error'){
                this.computClass =  'error'
                // this.modalSoundId = anov.soundServer.play({type: 'modalError'})
            }
            this.params = params
            this.modalFlag = true;
            this.init();
        },
        init(){
            let _this = this
            let componentsTl = anov.partServer.getCompByTagName(this.componentsName)[0]
            this.tl = new TimelineMax({
                autoRemoveChildren: true
            })
            let tw = TweenMax.to('.modal-wrapper', 0.1, { opacity: 1 })
            let tw0 = TweenMax.to('.modal-mask', 0.1, { opacity: 1 })
            let tw1 = TweenMax.to('.modal-top1', 0.2, { opacity: 1 })
            let tw2 = TweenMax.to('.modal-bottom', 0.2, { opacity: 1 })
            let tw3 = TweenMax.from('.modal-center', 0.4, {height: 0 })
            this.tl.addLabel('start')
            this.tl
                .add(tw, 'start+=0')
                .add(tw0, 'start+=0')
                .add(tw1, 'start+=0.2')
                .add(tw2, 'start+=0.3')
                .add(tw3, 'start+=0.3')
                .add(componentsTl.init, 'start+=.5')
        },
        reset() {
            var appDom = document.querySelector('#app')
            TweenMax.to(appDom, .5, {filter: ''})
            TweenMax.to('.modal-wrapper', .5, {opacity: 0, zIndex: '-1'})
        },
        destroy(params){
            if(!params){
                this.componentsName = 'modalSimple'
            }else {
                this.componentsName = params.componentsName
            }
            let componentsTl = anov.partServer.getCompByTagName(this.componentsName)[0]
            anov.soundServer.play({type: 'modalError'})
            this.reset()
            componentsTl.destroy(params)
        }
    },
    created() { 
        
    },
    mounted() {
        EventBus.$on('closeModal', (state, data) => {
            this.destroy(state)
        })
        EventBus.$on('openModal', (state, data) => {
            this.open(state)
        })
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
@import '../../../css/_lib-variable.scss';

.modal-wrapper {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

.modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    opacity: 0;
}
.modal-content {
    width: 750px;
    z-index: 1000;
    box-shadow: 0 0 30px rgba(0,0,0,.8);
    .modal-top {
        position: relative;
        width: 100%;
        height: 24px;
        opacity: 0;
        .modal-top-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .modal-top-color{
            height: 100%;
        }
    }
    .modal-bottom {
        opacity: 0;
        transform: rotateX(180deg);
    }
    .modal-center {
        position: relative;
        padding: 30px 0;
        background: rgba(16,16,21, .6);
        &::before{
            position: absolute;
            content: '';
            left: 0;
            top: 25%;
            width: 1px;
            height: 50%;
        }
        &::after{
            position: absolute;
            content: '';
            right: 0;
            top: 25%;
            width: 1px;
            height: 50%;
        }
       
    }
}
.color1-path {
    fill: rgba(16,16,21, .6);
}
.success {
    color: $modal-success-color;
    .border1-path {
        fill: $modal-success-color;
    }
    .modal-center {
        border-left: 1px solid $modal-success-color5;
        border-right: 1px solid $modal-success-color5;
        &::before{
            background: $modal-success-color;
        }
        &::after{
            background: $modal-success-color;
        }
    }
    .modal-circle-o {
        border: 2px solid $modal-success-color5;
    }
    .modal-circle-i {
        border: 2px solid $modal-success-color5;
    }
    .modal-text {
        color: $modal-success-color;
    }
    .modal-btn {
        color: $modal-success-color;
        border: 1px solid $modal-success-color;
        box-shadow: 0 0 10px $modal-success-color3, 0 0 10px $modal-success-color3 inset;
        &:hover{
            background: $modal-success-color;
            color: #000;
        }
    }
    .icon_jinggao {
        color: $modal-success-color;
        text-shadow: 0 0 16px $modal-success-color6, 2px 2px 12px $modal-success-color;
    }
}
.warning {
    color: $modal-warn-color;
    .border1-path {
        fill: $modal-warn-color;
    }
    .modal-center {
        border-left: 1px solid $modal-warn-color5;
        border-right: 1px solid $modal-warn-color5;
        &::before{
            background: $modal-warn-color;
        }
        &::after{
            background: $modal-warn-color;
        }
    }
    .modal-circle-o {
        border: 2px solid $modal-warn-color5;
    }
    .modal-circle-i {
        border: 2px solid $modal-warn-color5;
    }
    .modal-text {
        color: $modal-warn-color;
    }
    .modal-btn {
        color: $modal-warn-color;
        border: 1px solid $modal-warn-color;
        box-shadow: 0 0 10px $modal-warn-color3, 0 0 10px $modal-warn-color3 inset;
        &:hover{
            background: $modal-warn-color;
            color: #000;
        }
    }
    .icon_jinggao {
        color: $modal-warn-color;
        text-shadow: 0 0 16px $modal-warn-color6, 2px 2px 12px $modal-warn-color;
    }
}
.error {
    color: $modal-error-color;
    .border1-path {
        fill: $modal-error-color;
    }
    .modal-center {
        border-left: 1px solid $modal-error-color5;
        border-right: 1px solid $modal-error-color5;
        &::before{
            background: $modal-error-color;
        }
        &::after{
            background: $modal-error-color;
        }
    }
    .modal-circle-o {
        border: 2px solid $modal-error-color5;
    }
    .modal-circle-i {
        border: 2px solid $modal-error-color5;
    }
    .modal-text {
        color: $modal-error-color;
    }
    .modal-btn {
        color: $modal-error-color;
        border: 1px solid $modal-error-color;
        box-shadow: 0 0 10px $modal-error-color3, 0 0 10px $modal-error-color3 inset;
        &:hover{
            background: $modal-error-color;
            color: #000;
        }
    }
    .icon_jinggao {
        color: $modal-error-color;
        text-shadow: 0 0 16px $modal-error-color6, 2px 2px 12px $modal-error-color;
    }
}
</style>